<template>
  <div>
    <div class="content">
      <dl :style="{ color: '#888' }">
        <dt>
          <h2>户型</h2>
        </dt>
        <div class="item">
          <dd v-for="item in filtCityList.roomType" :key="item.value"  @click="selFn(item.value,$event)">
            <span>{{ item.label }}</span>
          </dd>
        </div>
        <dt>
          <h2>朝向</h2>
        </dt>
        <div class="item">
          <dd v-for="item in filtCityList.oriented" :key="item.value"  @click="selFn(item.value,$event)">
            <span>{{ item.label }}</span>
          </dd>
        </div>
        <dt>
          <h2>楼层</h2>
        </dt>
        <div class="item">
          <dd v-for="item in filtCityList.floor" :key="item.value"  @click="selFn(item.value,$event)">
            <span>{{ item.label }}</span>
          </dd>
        </div>
        <dt>
          <h2>房屋亮点</h2>
        </dt>
        <div class="item">
          <dd v-for="item in filtCityList.characteristic" :key="item.value"  @click="selFn(item.value,$event)">
            <span>{{ item.label }}</span>
          </dd>
        </div>
      </dl>
    </div>
    <div class="bottom">
     <div class="clear" @click="clearFn">清除</div>
     <div class="yes" @click="yesFn">确定</div>
    </div>
  </div>
</template>

<script>
import { allHousesApi } from '@/api'
export default {
  props: ['filtCityList'],
  data () {
    return {
      active: 0,
      houseCondition: [],
      houstList: [],
      rightShow: null
    }
  },
  methods: {
    selFn (val, e) {
      if (e.target.tagName === 'SPAN') {
        e.target.classList.toggle('item_active')
        console.log(e.target.innerHTML)
        if (this.houseCondition.indexOf(val) !== -1) {
          this.houseCondition.splice(this.houseCondition.indexOf(val), 1)
        } else {
          this.houseCondition.push(val)
        }
      }
      console.log(this.houseCondition)
    },
    clearFn () {
      const spans = document.querySelector('dl').querySelectorAll('span')
      for (let i = 0; i < spans.length; i++) {
        spans[i].className = ''
      }
      this.houseCondition = []
    },
    async  yesFn () {
      this.rightShow = false
      this.$emit('showProp', this.rightShow)
      const res = await allHousesApi({
        cityId: JSON.parse(localStorage.getItem('hkzf_city')).value,
        more: this.houseCondition.join(',')
      })
      this.houstList = res.data.body.list
      this.$emit('getList', this.houstList)
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  width: 225px;
  margin-left: 40px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 14px;
  &:last-child{
    border-bottom: none;
  }
}
dd {
  display: inline-block;
}
span {
  margin: 0 18px 15px 0;
  font-size: 12px;
  display: inline-block;
  height: 32px;
  width: 70px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
}
.content {
  margin-top: 20px;
  padding: 0 15px;
  width: 300px;
  h2 {
    font-size: 15px;
    font-weight: 400;
    margin: 20px 0;
  }
}
.item_active {
  border: 1px solid #21b97a;
  color: #21b97a;
  background-color: #defaef;
}
.bottom{
  width: 100%;
  position: sticky;
    right: 0;
    bottom: 0;
  height: 50px;
  display: flex;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  // border-top: 1px solid;
  .clear{
    flex: 1;
    color:#21b97a ;
    background-color: #fff;
  }
  .yes{
    flex: 2;
    background-color:#21b97a;
    color: #fff;
  }
}
</style>
